<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>北大青鸟注册</title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			#a{
				background-image: url(img/reg-mobile.jpg);
				height: 600px;
				position: relative;
			}
			#b span{
				border: 1px solid royalblue;
				color: white;
				background-color: royalblue;
				display: inline-block;
				width: 150px;
				text-align: center;
			}
			#b{
				position: absolute;
				top: 45px;
				left: 200px;
			}
			#c{
				background-color: white;
				position: absolute;
				top: 100px;
				left: 200px;
				border: 1px solid white;
				width: 900px;
				height: 500px;
			}
			#load p{
				border: 1px solid royalblue;
				width: 150px;
				color: white;
				background-color: royalblue;
				position: absolute;
				top: 30px;
				left: 20px;
			}
			#load{
				border-left: 1px dashed black;
				height: 300px;
				position: absolute;
				top: 3px;
				left: 600px;
			}
			#box{
				display: none;
			}
		</style>
		<script src="js/jquery-1.12.4.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#s").click(function(){
					$("#s").css({"background-color":"white","color":"black"});
					$("#y").css({"background-color":"royalblue","color":"white"});
					$("#box").hide();
				})
				
				$("#y").click(function(){
					$("#y").css({"background-color":"white","color":"black"});
					$("#s").css({"background-color":"royalblue","color":"white"});
					$("#box").show();
				})
				function checkEmail(){
					if($("#email").val().length<1){
						$("#email").next().html("邮箱不能为空").css("color","red");
						return false;
					}
					var regEmail=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
					if(!regEmail.test($("#email").val())){
						$("#email").next().html("邮箱格式错误").css("color","red");
						return false;
					}
					$("#email").next().html("√").css("color","green");
					return true;
				};
				$("#name").blur(checkName);
				function checkName(){
					if($("#name").val().length<1){
						$("#name").next().html("昵称不能为空").css("color","red");
						return false;
					}
					$("#name").next().html("√").css("color","green");
					return true;
				};
				$("#pw1").blur(checkPw1);
				function checkPw1(){
					var regPW=/^[\w]{6,16}$/
					if($("#pw1").val().length<1){
						$("#pw1").next().html("密码不能为空").css("color","red");
						return false;
					}
					if(!regPW.test($("#pw1").val())){
						$("#pw1").next().html("密码格式错误").css("color","red");
						return false;
					}
					$("#pw1").next().html("√").css("color","green");
					return true;
				};
				$("#pw1").blur(checkPw2);
				function checkPw2(){
					if($("#pw2").val().length<1){
						$("#pw2").next().html("密码不能为空").css("color","red");
						return false;
					}
					if($("#pw2").val()!=$("#pw1").val()){
						$("#pw2").next().html("2次密码要相同").css("color","red");
						return false;
					}
					$("#pw2").next().html("√").css("color","green");
					return true;
				};
				$("#verCode").blur(checkCode);
				function checkCode(){
					if($("#verCode").val().length<1||$("#verCode").val().length>4){
						$("#verCode").next().next().html("验证码错误").css("color","red");
						return false;
					}
					$("#verCode").next().next().html("√").css("color","green");
					return true;
				};
				$("#register").submit(function(){
					var check=checkEmail()&checkName()&checkPw1()&checkPw2()&checkCode();
					if($("#agree").prop("checked")){
						if(check>0){
							return true;
						}
					}
					return false;
				});
			})
		</script>
	</head>
	
	<body >
		<div id="a">
			<div id="b">
				<span id="s">
					
					<h3>手机注册</h3>
				</span>&nbsp;
				<span id="y" >
					
					<h3>邮箱注册</h3>
					
				</span>
			</div>
			<div id="c">
				<div id="box">
			
			<form id="register" action="http://www.baidu.com">
				<ul>
				<li>
					<input type="email" name="email" id="email" value="" placeholder="请输入您的常用邮箱"/>
					<span>请输入您的常用邮箱</span>
				</li>
				<li>
					<input type="text" name="name" id="name" value="" placeholder="请输入昵称"/>
					<span>4-12位字符、英文、数字、或者中文均可</span>
				</li>
				<li>
					<input type="password" name="pw1" id="pw1" value="" placeholder="请输入密码"/>
					<span>6-16位字符或数字、字母区分大小写</span>
				</li>
				<li>
					<input type="password" name="pw2" id="pw2" value="" placeholder="请再次输入密码"/>
					<span></span>
				</li>
				<li>
					<input type="text" name="verCode" id="verCode" value="" placeholder="请输入右侧验证码"/>
					<span><img src="img/59a11fa7365d1.png"/></span>
					<span></span>
				</li>
				<li>
					<input type="checkbox" name="agree" id="agree" value="" />
					<span id="agreeText" style="font-size: 14px;">同意 <a href="#">用户服务条款</a></span>
				</li>
				<li>
					<input type="submit" id="reg" name="" value="注册"/>
				</li>
				</ul>
			</form>
			<div id="load">
				<p>已有账号，马上登陆</p>
			</div>
		
			</div>
		</div>
		
	</body>
</html>
